<template>
    <el-dialog :visible.sync="visible" title="预览(以实际页面为准)" width="410px">
        <div v-if="info">
            <el-carousel class="swiper" height='230px'>
                <el-carousel-item style="height: 230px;" v-for="item in info.img.split(',')" :key="item">
                    <img style="height: 230px;width: 100%;" :src="item" />
                </el-carousel-item>
            </el-carousel>
            <div class="info">
                <div class="namebox">{{ info.name }}</div>
                <div class="infobox">
                    <div class="tipbox">报名截止时间</div>
                    <div style="color: #555555;">例：2020-01-01 </div>
                </div>
                <div style="color: #555555;margin-top: 10px;"> 例：共1课节</div>
            </div>
            <div class="actinfo">
                <div class="adderss">
                    <div class="numbox">报名人数</div>
                    <div class="numinfo">当前名额剩余<span style="color: #FF8A9B;font-size: 18px;">1</span>个</div>
                </div>
                <div class="adderss" style="margin-top: 10px;">
                    <div class="numbox">年龄段</div>
                    <div class="numinfo">例：10-20</div>
                </div>
                <div class="adderss">
                    <div class="numbox">开课时间</div>
                    <div class="numinfo">
                        <div class="time">
                            <!-- <div v-for="(item, index) in info.time" :key="index"> -->
                            例：2020-01-01 - 2020-02-02
                            <!-- </div> -->

                            <!-- <div>指定日期 至 指定日期</div> -->
                            <!-- <div style="margin-top: 12px;">结束：{{ info.course_time.end_day }} {{ info.course_time.end_time_day }} -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="adderss">
                <div class="numbox">上课时间</div>
                <div class="weekbox">
                    <div class="numinfo">
                        例：每周
                        一 00:00 ~ 00:00
                    </div>
                </div>
            </div>
            <div class="adderss" style="margin-top: 10px">
                <div class="numbox">地址</div>
                <div class="numinfo">
                    <image src="../../static/dw1.png"></image>例：江西省南昌市红谷滩区
                </div>
            </div>
            <div class="adderss" style="margin-top: 20px;">
                <div class="numbox">详细地址</div>
                <div class="numinfo">例：详细地址</div>
            </div>
        </div>
        <div class="textbox">
            <div>授课老师</div>
        </div>
        <div class="teacherinfo">
            <!-- <image :src="info.avator.split(',')[0]"></image> -->
            <div class="namebox">
                <!-- <div class="name">{{info.teacher_name}}</div> -->
                <div class="type">例：主讲老师</div>
            </div>
        </div>
        <!-- <comment :list="info.evaluate"></comment> -->
        <div class="textbox" style="margin-top: 24px;">
            <div>课程详情</div>
        </div>
        <Editor v-if="info" preview v-model="info.content" :defaultConfig="editorConfig"  @onCreated="onCreated" />
        <div v-html="content" style="background-color: #FFF;"></div>
        <div style="height: 130px;"></div>
        <div class="navbut">
            <div class="kfbox">
                <image src="../../static/kf.png"></image>
                <div>客服</div>
                <button open-type="contact"></button>
            </div>
            <div class="butbox" @click="tosign()">例：立即报名</div>
        </div>
    </el-dialog>
</template>

<script>
// import comment from '../../components/comment.vue'
// import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import Editor from '@/components/editor.vue'
import { post } from '@/assets/js/http'
export default {
    components: {
        // comment
        Editor,
        // Toolbar
    },
    data() {
        return {
            id: '',
            info: null,
            content: '',
            week: ['一', '二', '三', '四', '五', '六', '日'],
            visible: false,
            editor: null,
			mode: "default",
            toolbarConfig: {},
            editorConfig: {
                MENU_CONF: {
                    uploadImage: {
                        fieldName: "file",
                        server: "/admin/ajax/upload",
                        headers: {
                            batoken: this.$store.state.token
                        },
                        /* eslint-disable-next-line */
                        customInsert(res, insertFn) {
                            insertFn(
                                $store.getters.baseUrl + res.data.file.url
                            );
                        }
                    },
                    uploadVideo: {
						fieldName: "file",
						server: "/admin/ajax/upload",
						headers: {
							batoken: this.$store.state.token,
						},
						/* eslint-disable-next-line */
						customInsert(res, insertFn) {
							insertFn($store.getters.baseUrl + res.data.file.url)
						},
					},
                }
            },
        }
    },
    beforeDestroy() {
        const editor = this.editor;
        if (editor == null) return;
        editor.destroy();
    },
    created() {
        this.onCreated()
    },

    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor);
        },
        open(info) {
            this.info = info
            this.visible = true
        },
        getinfo() {
            post({
                url: '/admin/project.TeacherCourse/detail',
                data: {
                    id: 14 || this.id
                }
            }).then(res => {
                this.info = res.data
                this.info.evaluate = this.info.evaluate.splice(0, 2)
                this.content = this.$replace_Rich_text(res.data.content)
            })
        },
        dateFormat: function (value) {
            var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            var sdate = ("0" + date.getDate()).slice(-2);
            var hour = ("0" + date.getHours()).slice(-2);
            var minute = ("0" + date.getMinutes()).slice(-2);
            var second = ("0" + date.getSeconds()).slice(-2);
            // 拼接
            var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
            // 返回
            return result;
        },
        timeFormat: function (value) {
            var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var year = date.getFullYear();
            var month = ("0" + (date.getMonth() + 1)).slice(-2);
            var sdate = ("0" + date.getDate()).slice(-2);
            var hour = ("0" + date.getHours()).slice(-2);
            var minute = ("0" + date.getMinutes()).slice(-2);
            var second = ("0" + date.getSeconds()).slice(-2);
            // 拼接
            var result = hour + ":" + minute //+ ":" + second;
            // 返回
            return result;
        },
        tosign() {
            uni.navigateTo({
                url: '/pages/application/application?id=' + this.info.id + '&type=' + 2//1活动，2课程
            })
        },
        more() {
            uni.navigateTo({
                url: '/pages/commentlist/commentlist?id=' + this.info.id
            })
        },
        onShareAppMessage(res) {
            if (res.from === 'button') {// 来自页面内分享按钮
                console.log(res.target)
            }
            // return {
            //   title: "邀请好友",
            //   path: '/pages/index/index?pid='+this.id
            // }
        },
        onShareTimeline() {
            return {
                title: '快乐生活，就到众享幸福家',
                path: "/pages/coursesinfo/coursesinfo?id=" + this.id
            }
        },
        tomaps() {
            uni.navigateTo({
                url: '/pageshop/maps/maps?longitude=' + this.info.longitude + '&latitude=' + this.info.latitude + '&address=' + this.info.address
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.swiper {
    width: 375px;
    height: 230px;
    background: #FFF;

    .swiper-item {
        display: block;
        height: 230px;
        text-align: center;

        img {
            width: 100%;
            height: 230px;
        }
    }
}

.info {
    width: 345px;
    padding: 20px 0px;
    // height: 308px;
    background: #FFFFFF;
    border-radius: 0px 0px 10px 10px;

    .namebox {
        font-size: 24px;
        font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
        color: #222222;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .infobox {
        display: flex;
        align-items: center;
        margin-top: 10px;

        .tipbox {
            // width: 68px;
            height: 19px;
            padding: 0 5px;
            background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
            border-radius: 2px 4px 4px 4px;
            line-height: 19px;
            text-align: center;
            margin-right: 9px;
            font-size: 14px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            color: #FFFFFF;
        }
    }
}


.numinfo {
    font-weight: bold;
    color: black;
    font-size: 14px!important;
}

.adderss {
    display: flex;
}

.numbox {
    min-width: 120px;
    font-size: 14px !important;
    // margin-bottom: 10px;
}

.actinfo {
    width: 345px;
    padding: 10px 0px;
    background: #FFFFFF;
    border-radius: 10px;
    margin: 12px 0;
    margin-bottom: 0;
    padding-bottom: 0;

    .adderss {
        width: 345px;
        display: flex !important;
        align-items: center;

        // height: 80px;
        .numbox {
            // min-width: 98px;
            font-size: 16px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            color: #666666;
            // margin-right: 15px;
        }

        .weekbox {
            width: 251px;
            font-size: 16px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            color: #222222;
        }

        .numinfo {
            width: 251px;
            font-size: 16px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            color: #222222;

            image {
                width: 13px;
                height: 14px;
                margin-right: 4px;
            }

            // >view{
            // 	width: fit-content;
            // 	height: 56px;
            // 	background: #FFF9FA;
            // 	border-radius: 8px;
            // 	padding: 0 14px;
            // 	line-height: 56px;
            // }
            .time {
                width: 264px;
                font-size: 16px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                color: #333333;
                margin: 10px 0;

                >view {
                    // height: 56px;
                    background: #FFF9FA;
                    border-radius: 4px;
                    width: fit-content;
                    padding: 0 7px;
                    // line-height: 56px;
                    font-size: 16px;
                    font-family: Source Han Sans CN-Medium, Source Han Sans CN;
                    color: #222222;
                }
            }
        }
    }
}

.textbox {
    width: 345px;
    // padding: 0 15px;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
    color: #FF6178;
    background-color: #FFF;
    display: flex;
    justify-content: space-between;

    .more {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        color: #888888;

        image {
            width: 5.5px;
            height: 9.75px;
            margin-left: 6px;
        }
    }
}

.teacherinfo {
    background-color: #FFF;
    width: 345px;
    padding: 0 15px 20px 15px;
    display: flex;
    align-items: center;

    image {
        width: 50px;
        height: 50px;
        margin-right: 10px;
        border-radius: 100%;
    }

    .namebox {
        font-size: 16px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        color: #222222;

        .name {
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .type {
            font-size: 14px;
            font-family: Source Han Sans CN-Medium, Source Han Sans CN;
            color: #555555;
        }
    }
}

.navbut {
    width: 375px;
    height: 65px;
    background: #FFFFFF;
    position: sticky;
    bottom: 0px;
    display: flex;
    align-items: center;

    .kfbox {
        width: 84px;
        font-size: 12px;
        font-family: PingFang SC-Medium, PingFang SC;
        color: #444444;
        text-align: center;
        position: relative;

        image {
            width: 28px;
            height: 28px;
        }

        >button {
            width: 84px;
            height: 45px;
            position: absolute;
            opacity: 0;
            border: none;
            // z-index: 99;
            top: 0;
        }
    }

    .butbox {
        width: 276px;
        height: 45px;
        background: #FF8A9B;
        border-radius: 23px;
        font-size: 15px;
        font-family: Source Han Sans CN-Medium, Source Han Sans CN;
        color: #FFFFFF;
        line-height: 45px;
        text-align: center;
    }
}
</style>